<template>
    <div class="category">
        <div  v-for="(item,index) in items" :key='index' class="wrap">
            <div class="bg"></div>
            <p class="list">{{item.info.title}}</p>
            <ul>
                <router-link tag="li" class="content" 
                :to="{path:'Preference',query:{deviceId:i.link}}" 
                v-for="(i,index) in item.list" :key='index'>
                    <img :src="i.image">
                    <span>{{i.title}}</span>   
                </router-link>
            </ul>
        </div>   
    </div> 
</template>
<script>
    export default{
        data(){
            return {
                items:[]
        }},
        mounted(){
            let categorylist_1=[];
            let address=this.$route.query.deviceId;
            let num=address.indexOf('pid=');
            let linknum=address.slice(num+4,num+9);
            console.log(11111,linknum);
            this.$http.jsonp('https://simba-api.meilishuo.com/venus/mce/v1/urlMakeUpChange/h5',
                {params: {pid:linknum,channel:'wap'}},
                {jsonp:'jsonp1'})
                .then(function(res){
                    console.log(2222,res.body.value)
                    for(var key in res.body.value){
                        console.log(res.body.value[key])
                        if(res.body.value[key].list.length>0){
                            categorylist_1.push(res.body.value[key])
                        }
                    }
                //    console.log(categorylist_1)
                    this.items=categorylist_1
                })
        },
    }
</script>
<style scoped>
    .list{
        height: 1.5rem;
        line-height: 1.5rem;
        font-size: 0.7rem;
        color: rgb(51, 51, 51);
        padding-left: 0.5rem;
    }
    ul{
        display: flex;
        flex-wrap: wrap;        
    }
    .content{
        width: 25%;
        height: 5.23rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        border-right: 1px solid rgb(238, 238, 238);
        border-top: 1px solid rgb(238, 238, 238);
        padding-bottom: 0.5rem;
        color: rgb(102, 102, 102);
    }
    .wrap li:nth-last-child(1){
        border-bottom: 1px solid rgb(238, 238, 238);        
    }
    .wrap li:nth-last-child(2){
        border-bottom: 1px solid rgb(238, 238, 238);        
    }
    .wrap li:nth-last-child(3){
        border-bottom: 1px solid rgb(238, 238, 238);        
    }
    .wrap li:nth-last-child(4){
        border-bottom: 1px solid rgb(238, 238, 238);        
    }
    .content img{
        width: 80%;
    }
    .bg{
        height: 0.4rem;
        background: #f2f2f2;
    }

</style>